<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>门店管理</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_store_search">
        <button id="btn_add_store" class="layui-btn layui-btn-normal">
          <i class="layui-icon layui-icon-add-1"></i>添加
        </button>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_store"></div>

      <script type="text/html" id="tpl_name">
        {{# if (d.is_default) { }}
        <span class="layui-badge">默认</span>
        {{# } }}
        {{d.name}}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link layui-font-green" lay-event="edit">
          <i class="layui-icon layui-icon-edit"></i>编辑
        </a>
        {{# if (!d.is_default) { }}
        <div class="ant-divider"></div>
        <a class="layui-table-link layui-font-red" lay-event="del">
          <i class="layui-icon layui-icon-delete"></i>删除
        </a>
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['fox_table'], function () {
    let $ = layui.$
      , fox_table = layui.fox_table
      , admin = layui.admin
      , form = layui.form
      , view = layui.view
      , layer = layui.layer

    let resourceUrl = 'agent-admin/stores'

    // 列表查询
    fox_table.render({
      id: 'table_store'
      , url: resourceUrl
      , cols: [[
        {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
        , {title: '门店名称', templet: '#tpl_name', minWidth: 200}
        , {title: '负责人手机号', field: 'mobile', width: 180}
        , {title: '分账账号', field: 'divide_account', width: 200}
        , {title: '代理手续费', field: 'agent_service_fee_rate', width: 100}
        , {title: '修改时间', field: 'updated_at', width: 180, align: "center"}
        , {title: '操作', width: 200, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
      ]]
    });

    //监听操作栏
    fox_table.toolbar(function (obj) {
      let data = obj.data;
      if (obj.event === 'edit') {
        showForm(data)
      }
      if (obj.event === 'del') {
        layer.confirm('确认删除该数据?', function (index) {
          admin.del(resourceUrl, data.id, function (res) {
            layer.close(index);
            fox_table.reload(); //重载表格
          })
        });
      }
    });

    //添加
    $('#btn_add_store').click(function () {
      showForm();
      return false;
    });

    //显示弹窗
    function showForm(data) {
      data = data || {};
      let minWidth = '500px';
      let minHeight = '380px';
      admin.popup({
        title: (data.id ? '修改' : '添加') + '门店'
        , area: [minWidth, minHeight]
        , id: 'popup_store'
        , success: function (layero, index) {
          view(this.id).render('store/form', data).done(function () {
            form.on('submit(submit_store)', function (d) {
              let field = d.field;
              console.log(field)
              if ((field.divide_account != '' && field.agent_service_fee_rate == 0)
                || (field.divide_account == '' && field.agent_service_fee_rate != 0)) {
                layer.msg('分账账号和代理手续费率必须同时设置')
                return
              }
              admin.post(resourceUrl, field, function (res) {
                layer.close(index);
                fox_table.reload();
              })
            })
          })
        }
      })
    }
  })
</script>

